<template>
  <Layout>
    <section class="p-5 mb-5 bg-white">
      <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="query"
      >
        <el-form-item
          class="w-2/12"
          prop="logisticsNo"
        >
          <el-input
            v-model.trim="query.logisticsNo"
            placeholder="快递单号"
          />
        </el-form-item>
        <el-form-item
          class="w-2/12"
          prop="logisticsCode"
        >
          <el-input
            v-model.trim="query.logisticsCode"
            placeholder="快递code"
          />
        </el-form-item>
        <el-form-item
          class="w-2/12"
          prop="supplier"
        >
          <el-select
            v-model.trim="query.supplier"
            placeholder="供应商"
            clearable
          >
            <el-option
              v-for="item in ['TRACK718', 'TRACK51', 'AFTERSHIP']"
              :key="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleQuery({ num: 1 })"
          >
            查询
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section>
      <el-table
        :data="data.records"
        border
      >
        <el-table-column
          label="快递单号"
          prop="logisticsNo"
        />
        <el-table-column
          label="快递code"
          prop="logisticsCode"
        />
        <el-table-column
          label="最新节点"
          prop="latestNodeMessage"
        />
        <el-table-column
          label="最新状态"
          prop="latestState"
        />
        <el-table-column
          label="最新节点时间"
          prop="latestUpdateTime"
        />
        <el-table-column
          label="更新时间"
          prop="upadteTime"
        />
        <el-table-column
          label="创建时间"
          prop="createTime"
        />
        <el-table-column
          label="供应商"
          prop="supplier"
        />
        <el-table-column
          label="详情"
          fixed="right"
          min-width="80px"
        >
          <template #default="{ row }">
            <SettingModal :value="row">
              <el-button type="text">
                编辑
              </el-button>
            </SettingModal>
            <TrajectoryModal :value="row">
              <el-button
                type="text"
                class="detail"
              >
                详情
              </el-button>
            </TrajectoryModal>
            <el-button
              type="text"
              @click="refresh(row)"
            >
              刷新
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center py-4">
        <el-pagination
          v-model:current-page="query.num"
          background
          :total="data.total"
          @current-change="handleQuery"
        />
      </div>
    </section>
  </Layout>
</template>

<script>
import { trackRefresh } from '@/api/express'
import Layout from '@/layout/index.vue'
import { mapGetters } from 'vuex'

export default {
    components: {
        Layout,
        TrajectoryModal: () => import('./components/TrajectoryModal'),
        SettingModal: () => import('./components/SettingModal')
    },
    data() {
        return {
            query: {
                num: 1,
                logisticsNo: '',
                logisticsCode: '',
                supplier: '',
                size: 10
            }
        }
    },
    computed: {
        ...mapGetters({
            data: 'express/trackData'
        })
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.handleQuery()
        },
        handleQuery(query = {}) {
            this.query = { ...this.query, ...query }
            this.$nextTick(() =>
                this.$store.dispatch('express/trackList', { ...this.query })
            )
        },
        handleReset() {
            this.$refs.queryForm.resetFields()
            this.query.num = 1
            this.handleQuery()
        },
        async refresh(item) {
            await trackRefresh({ id: item.id })
            this.$message.success('操作成功')
        }
    }
}
</script>
<style scoped>
  .detail {
    margin: 0 10px;
  }
  ::v-deep .el-form-item--medium .el-form-item__content {
    margin-left: 20px !important;
  }
</style>
